<template>
  <div class="modelingSettings flex">
    <div class="modelingSettingsLeft" ref="modelingSettingsLeft">
      <panel-aside @onSearch="productSearch"></panel-aside>
    </div>
    <div class="modelingSettingsRight">
      <div class="kan">
        <h2>{{ productCheck.productName }}</h2>
        <Button type="primary"> <a
            href="https://images.tospurfang.com/doc/%E6%88%BF%E6%BA%90%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
            style="color:#fff;" target="_blank">查看操作指引</a>
        </Button>
      </div>
      <div class="filter-content">
        <Select v-model="filterForm.buildingId" style="width: 200px" @on-change="
            filterUnit();
          ">
          <Option v-for="item in buildingList" :value="item.buildingId" :key="item.buildingId">
            {{ item.buildingName }}</Option>
        </Select>
        <Select v-model="filterForm.unitId" style="width: 200px" @on-change="changeUnit">
          <Option v-for="item in unitList" :value="item.unitId" :key="item.unitId">
            {{ item.unitName }}</Option>
        </Select>
        <Select v-model="filterForm.buildingTypes" multiple style="width: 350px"
          @on-change="changeBuildType" :max-tag-count='3' placeholder="全部建筑类型">
          <Option v-for="item in buildingTypeList" :value="item.key" :key="item.key">
            {{ item.value }}</Option>
        </Select>
      </div>
      <div class="modelTit flex-vertical-center flex-horizontal-between flex-wrap flex">
        <p>已选{{ selectionArr.length }}项</p>
        <div>
          <Button :disabled="selectionArr.length==0" @click="deleteRoomFun()"
            v-if="unlocking('0103040100')">删除房源</Button>
          <Button type="success" @click="editRoomCode"
            v-if="unlocking('0103040200')">修改房号</Button>
          <Button type="success" @click="relateRoomFun"
            v-if="unlocking('0103040300')">关联户型</Button>
          <Button type="success" @click="editRoomMsg"
            v-if="unlocking('0103040400')">编辑房源</Button>
          <Button type="primary" class="rel position-relative" @click="uploadFun"
            v-if="unlocking('0103040500')">导入房源信息</Button>
          <Button type="primary" @click="downloadFun"
            v-if="unlocking('0103040600')">导出房源</Button>
        </div>
      </div>
      <div class="table position-relative">
        <div class="tab">
          <Table border class="table-content" ref="TableHeight"
            @on-selection-change="selectionChange" :columns="tableColumn"
            :max-height="onresizeHeight" :data="dataList"></Table>
        </div>
        <!-- 分页 -->
        <page v-if="pageData.total!=0" :pageData="pageData" @pageOnChangeFun="pageOnChangeFun"
          @pageOnPageSizeChangeFun="pageOnPageSizeChangeFun"></page>
        <Spin fix v-show="loading">
          <Icon type="ios-loading" size=20 class="demo-spin-icon-load"></Icon>
          <div>Loading</div>
        </Spin>
      </div>
    </div>
    <!--编辑房源-->
    <Modal v-model="editRoomFlag" title="编辑房源" @on-cancel="closeEditRoom" width="500"
      :footerHide="true">
      <edit-room v-if="editRoomFlag" :coopMode='coopMode' :editRoom="editRoom" @onClose="closeEditRoom"
        @onSearch="initData"></edit-room>
    </Modal>
    <!--修改房号-->
    <Modal v-model="editRoomCodeFlag" title="修改房号" @on-cancel="closeEditRoom" width="500"
      :footerHide="true">
      <edit-room-code v-if="editRoomCodeFlag" :roomList="selectionArr" @onClose="closeEditRoom"
        @onSearch="initData"></edit-room-code>
    </Modal>
    <!--关联户型-->
    <Modal v-model="relateRoomFlag" title="关联户型" @on-cancel="closeEditRoom" width="80"
      :footerHide="true">
      <relate-room v-if="relateRoomFlag" :relateRoomList="selectionArr"
        @onClose="closeEditRoom" @onSearch="initData"></relate-room>
    </Modal>
    <!-- 导入房源 -->
    <Modal v-model="importHouseFlag" title="导入房源" @on-cancel="closeEditRoom" width="500"
      :footerHide="true">
      <import-house :buildingId="buildingId" @onClose="closeEditRoom" @onSearch="initData"
        v-if="importHouseFlag"></import-house>
    </Modal>
  </div>
</template>

<script>
  import panelAside from '../modelingSettings/components/panelAside.vue'
  import editRoom from './components/editRoom.vue'
  import editRoomCode from './components/editRoomCode.vue'
  import relateRoom from './components/relateRoom.vue'
  import importHouse from '../modelingSettings/components/importHouse.vue'
  import roomMgr from '@/biz/modeling/room/room'
  import toolApi from '@/biz/base/tool'
  import columnConfig from './components/buildingColumn'
  import advanceSaleMgr from '@/biz/advanceSaleReview/advanceSaleReview'
  
  export default {
    components: { panelAside, editRoom, editRoomCode, relateRoom, importHouse },
    data() {
      return {
        importHouseFlag: false, // 导入房源
        buildingId: '',
        loading: false,
        // 筛选条件
        filterForm: {
          buildingId: 0,
          unitId: 0,
          buildingTypes: []
        },
        coopMode: 0,
        dropData: [],
        buildingList: [
        {
          buildingName: '全部楼栋',
          buildingId: 0,
        }, ],
        unitList: [
        {
          unitName: '全部单元',
          unitId: 0,
        }, ],
        unitListAll: [],
        // 列表
        selectionArr: [],
        tableColumn: columnConfig.columns,
        // 表格数据
        dataList: [],
        // 编辑房源
        editRoomFlag: false,
        editRoom: [],
        // 修改房号
        editRoomCodeFlag: false,
        // 关联户型
        relateRoomFlag: false,
        // 宽高
        onresizeHeight: 0,
        pageData: {
          total: 0,
          current: 1,
          rows: 50,
          pageSizeOpts: [50, 40, 30, 20, 10],
        },
        // 选择产品
        productCheck: {},
        roomTypeList: [],
        //建筑类型
        buildingTypeList: []
      }
    },
    computed: {},
    watch: {},
    methods: {
      //获取当前产品下的建筑类型
      getBuildingTypeList() {
        let data = this.$dt.dictInfo().productType
        this.buildingTypeList = data.find((item) => {
          return item.key == this.productCheck.productType
        }).children
      },
      // 户型信息
      getHouseTypeList() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
        }
        roomMgr.getHouseTypeList(params).then((res) => {
          this.roomTypeList = res
        })
      },
      productSearch(parmas) {
        this.productCheck = parmas?{ ...parmas }:{}
        // 重置筛选
        this.filterForm = {
          buildingId: 0,
          unitId: 0,
        }
        this.pageData.current = 1
        
        if(parmas){
          this.initData()
          this.getBuildingList()
          this.getBuildingTypeList()
        }
      },
      // 获取产品下楼栋，单元信息
      getBuildingList() {
        this.buildingList = []
        this.unitList = []
        this.unitListAll = []
        let params = {
          productId: this.productCheck.productId,
        }
        advanceSaleMgr.productInfo({ productId: this.productCheck.productId }).then(res => {
          this.coopMode = res.coopMode
        })
        roomMgr.getBuildingList(params).then((res) => {
          if (res) {
            this.dropData = res.dropData
            this.buildingList = res.buildingList
            this.unitListAll = res.unitListAll
            this.unitList = res.unitList
          }
        })
      },
      // 过滤单元
      filterUnit() {
        this.unitList = [
        {
          unitName: '全部单元',
          unitId: 0,
        }, ]
        this.filterForm.unitId = 0
        if (this.filterForm.buildingId) {
          this.unitList = this.unitList.concat(
            this.dropData.filter(
              (item) => item.buildingId == this.filterForm.buildingId
            )[0].unitDTOS
          )
        } else {
          this.unitList = this.unitList.concat(this.unitListAll)
        }

        //查询数据
        this.changeUnit()
      },
      // 改变单元
      changeUnit() {
        this.pageData.current = 1
        this.initData()
      },
      //建筑类型筛选
      changeBuildType() {
        this.pageData.current = 1
        this.initData()
      },
      // 列表数据
      initData() {
        let params = {
          productId: this.productCheck.productId,
          buildingId: this.filterForm.buildingId ?
            this.filterForm.buildingId : null,
          unitId: this.filterForm.unitId ? this.filterForm.unitId : null,
          buildingTypes: this.filterForm.buildingTypes,
          page: this.pageData.current,
          rows: this.pageData.rows,
        }
        this.loading = true
        this.selectionArr = []
        roomMgr
          .getRoomList(params)
          .then((res) => {
            if (res) {
              this.dataList = res.list
              this.pageData.total = res.total
            } else {
              this.dataList = []
              this.pageData.total = 0
            }
            this.loading = false
            this.$nextTick(function() {
              this.onresizeHeight = this.$tool.getTableHeight(
                this.$refs.TableHeight
              )
            })
          })
          .catch((res) => {
            this.dataList = []
            this.pageData.total = 0
            this.loading = false
          })
      },
      // 列表选择
      selectionChange(selection) {
        this.selectionArr = selection
      },
      // 关闭弹框
      closeEditRoom() {
        this.editRoomFlag = false
        this.editRoomCodeFlag = false
        this.relateRoomFlag = false
        this.importHouseFlag = false
      },
      // 编辑房源
      editRoomMsg() {
        if (!this.selectionArr.length) {
          this.$Message.info('请先选择您要编辑的房源！')
          return false
        }
        this.editRoom = this.selectionArr
        this.editRoomFlag = true
      },
      // 删除房源
      deleteRoomFun(singleObj = 0) {
        let params = {
          roomEditVOS: singleObj ? [singleObj] : this.selectionArr,
        }
        this.$Modal.confirm({
          title: '删除房源',
          content: `<p>请确认,您要删除${params.roomEditVOS.length}个房源，删除后不可恢复！</p>`,
          onOk: () => {
            roomMgr.delRoomFun(params).then((res) => {
              this.$Message.info('删除成功。')
              this.initData()
            })
          },
          onCancel: () => {
            this.$Message.info('您取消了删除。')
          },
        })
      },
      // 修改房号
      editRoomCode() {
        if (!this.selectionArr.length) {
          this.$Message.info('请先选择您要修改的房号！')
          return false
        }
        this.editRoomCodeFlag = true
      },
      // 关联户型
      relateRoomFun() {
        if (!this.selectionArr.length) {
          this.$Message.info('请先选择您要关联户型的数据！')
          return false
        }
        this.relateRoomFlag = true
      },
      // 上传
      uploadFun() {
        if (!this.filterForm.buildingId) {
          this.$Message.info('请先选择楼栋！')
          return false
        }
        this.buildingId = this.filterForm.buildingId
        this.importHouseFlag = true
      },
      // 导出房源
      downloadFun() {
        let params = {
          productId: this.productCheck.productId,
          buildingId: this.filterForm.buildingId ?
            this.filterForm.buildingId : null,
          unitId: this.filterForm.unitId ? this.filterForm.unitId : null,
          page: this.pageData.current,
          rows: this.pageData.rows,
          housesId: this.$dt.buildInfo().housesId,
        }

        toolApi.downloadCenter('/dt-building/room/downloadRoomData', params)
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        this.$refs.TableHeight.$refs.body.scrollTop = 0
        this.initData()
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.$refs.TableHeight.$refs.body.scrollTop = 0
        this.initData()
      },
    },
    created() {
      this.getHouseTypeList()
    },
    mounted() {
      let _this = this
      //发送this 到 js 文件里
      columnConfig.sendThis(this)
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            _this.onresizeHeight = _this.$tool.getTableHeight(
              _this.$refs.TableHeight
            )
          }, 10)
        })()
      }
    },
  }
</script>
<style lang='scss' scoped>
  .modelingSettings {
    padding: 10px;
    width: 100%;
    overflow: hidden;

    .filter-content {
      .ivu-select {
        margin-right: 20px;
      }
    }

    .modelingSettingsLeft {
      flex: 0 0 300px;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    .modelingSettingsRight {
      width: calc(100% - 300px);
      padding: 10px;

      h2 {
        margin: 10px 0;
      }

      .modelTit {
        padding: 10px;

        .ivu-btn {
          margin-left: 10px;
        }

        p {
          width: 100px;
        }
      }

      .table {
        height: 100%;
      }

      .tab {
        margin: 10px 0;
        width: 100%;

        .table-content {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .ivu-spin-fix {
    background-color: rgba(255, 255, 255, 0.35);
  }

  .kan {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>